<template>
  <a-modal v-model:open="open" title="查看学生考试成绩" width="800px" @ok="handleOk" @cancel="handleCancel">
    <div style="display: flex; justify-content: space-between; margin: 16px 0;">
      <a-select
          v-model:value="categorys"
          @change="handleCategoryChange"
          mode="multiple"
          placeholder="请选择班级"
          style="width: 200px"
        >
      <a-select-option v-for="category in categoryList" :key="category.id" :value="category.id">{{ category.category_name }}</a-select-option>
    </a-select>
      <a-button :loading="exportLoading" type="primary" @click="exportResult">导出学生成绩</a-button>
    </div>
    <a-table :dataSource="resultList" :columns="columns" :loading="loading" :pagination="false"></a-table>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { fetchExamPaperResult, fetchExamPaperResultExport } from '@/api/examPaper'
import { exportFile } from '@/utils/excel'
import { message } from 'ant-design-vue';

interface Props {
  categoryList: any[]
}
defineProps<Props>()

const open = ref(false)
watch(open, (val) => {
  if (!val) {
    categorys.value = []
    resultList.value = []
  }
})
const handleOk = () => {
  open.value = false
}
const handleCancel = () => {
  open.value = false
}
const openModal = (id: number) => {
  resultId.value = id
  getExamPaperResult()
  open.value = true
}

const handleCategoryChange = () => {
  getExamPaperResult()
}

const loading = ref(false)
const resultId = ref<any>()
const resultList = ref<any[]>([])
const getExamPaperResult = async () => {
  loading.value = true
  const res = await fetchExamPaperResult({ exam_paper_id: resultId.value, categorys: categorys.value })
  resultList.value = res.data.data
  loading.value = false
}
const columns = [
{
    title: '序号',
    align: 'center',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '学生姓名',
    align: 'center',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '答题状态',
    align: 'center',
    dataIndex: 'name',
    key: 'name',
    customRender: ({ record }: { record: any }) => {
      // 0-待评分 1已通过 2未通过
      return ['待评分', '已通过', '未通过'][record.pass_status]
    }
  },
  {
    title: '分数',
    align: 'center',
    dataIndex: 'score',
    key: 'score'
  },
]

const categorys = ref([])

const exportLoading = ref(false)

const exportResult = async () => {
  exportLoading.value = true
  const res = await fetchExamPaperResultExport({ exam_paper_id: resultId.value, categorys: categorys.value })
  const exDate = '学生成绩';
  exportFile(res.data, exDate, 'xlsx');
  exportLoading.value = false
  message.success('导出成功')
}

defineExpose({ openModal })
</script>

<style scoped lang="scss"></style>
